<template>
  <view class="container">
    <FilterView ref="filterView">
      <template #search>
        <uni-search-bar
          radius="17"
          bgColor="#fff"
          cancelButton="none"
          placeholder="搜索床号"
          v-model="queryData.bedNo"
          @confirm="onSearch"
          @clear="onSearch"
        ></uni-search-bar>
      </template>
      <template #form>
        <uni-forms
          ref="filterForm"
          v-model="queryData"
          label-position="top"
          label-width="150"
        >
          <uni-row :gutter="26">
            <uni-col :span="24">
              <uni-forms-item label="入住状态" name="bedStatus">
                <uni-data-select
                  placeholder="请选择"
                  :localdata="bedStatus"
                  v-model="queryData.bedStatus"
                />
              </uni-forms-item>
            </uni-col>
            <!-- <uni-col :span="24">
                            <uni-forms-item label="选择日期" name="date">
                                <uni-datetime-picker 
                                    type="datetimerange" 
                                    v-model="queryData.date" 
                                />
                            </uni-forms-item>
                        </uni-col> -->
          </uni-row>
        </uni-forms>
      </template>
      <template #footer>
        <view class="filterBtn">
          <button class="btn r" type="primary" @click="onReset">重置</button>
          <button class="btn s" type="primary" @click="onSure('filterForm')">
            确定
          </button>
        </view>
      </template>
    </FilterView>

    <view class="listBox">
      <swiper
        class="swiper-box"
        :duration="300"
        :current="current"
        @change="onTabchange"
        @transition="enabled = false"
        @animationfinish="enabled = true"
      >
        <swiper-item class="swiper-item">
          <list-scroll-view
            :ref="'scrollView0'"
            :api="getBunkList"
            height="80vh"
            :init="{
              roomId: query.roomId,
            }"
            :refresherEnabled="enabled"
          >
            <template v-slot:list="{ data }">
              <uni-collapse>
                <uni-collapse-item
                  class="item"
                  v-for="(item, i) in data"
                  :key="i"
                  :open="i === 0"
                  :title="`${item.roomNo}室${item.bedNo}号`"
                >
                  <view class="m">
                    <!-- <view
                      class="b"
                      v-for="(item, i) in item.roomConfigDetailVoList"
                      :key="i"
                    > -->
                    <view class="bItem">
                      <view class="name">类型</view>
                      <view class="value">{{
                        $util.selectDictLabel(checkInType, item?.checkInType)
                      }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">入住日期</view>
                      <view class="value">{{ item?.checkInDate }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">入住天数</view>
                      <view class="value">{{
                        item?.checkInDaysCalculate
                      }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">姓名</view>
                      <view class="value">{{ item?.checkInName }}</view>
                    </view>
                    <view class="bItem">
                      <view class="name">所在部门</view>
                      <view class="value">{{ item?.checkInDept }}</view>
                    </view>
                    <!-- <uni-icons
                      class="del"
                      type="trash-filled"
                      size="30"
                      color="#F44336"
                      @click="onItemDel(item)"
                    ></uni-icons> -->
                    <!-- </view> -->
                  </view>
                  <!-- <view class="f">
                    <button
                      class="btn"
                      size="mini"
                      type="primary"
                      @click="onAction(item)"
                    >
                      操作
                    </button>
                  </view> -->
                </uni-collapse-item>
              </uni-collapse>
            </template>
            <template #empty>
              <view class="uni-nodata">暂无数据!</view>
            </template>
          </list-scroll-view>
        </swiper-item>
      </swiper>
    </view>

    <uni-popup ref="popup">
      <FormView :data="data" :type="type" @callback="onCallback" />
    </uni-popup>
  </view>
</template>

<script>
import _ from 'lodash';
import {
  netInit,
  getBunkList,
  addRoomConfigDetail,
  delRoomConfigDetail,
} from '@/api/room';
import FormView from './bunkForm.vue';
import useAppStore from '@/store/modules/app';
import FilterView from '@/components/FilterView/index.vue';
import ListScrollView from '@/components/ListScrollView/index.vue';
export default {
  components: {
    FormView,
    FilterView,
    ListScrollView,
  },
  data() {
    return {
      checkInType: [
        {
          text: '职工',
          label: '职工',
          value: '1',
        },
        {
          text: '外来招待',
          label: '外来招待',
          value: '2',
        },
      ],
      bedStatus: [
        {
          label: '空床',
          text: '空床',
          value: '1',
        },
        {
          label: '入住',
          text: '入住',
          value: '2',
        },
      ],
      data: {},
      query: {},
      queryData: {},
      // 表单类型
      type: '',
      // api
      getBunkList,
      // swiper
      current: 0,
      enabled: true,
      data: ['列表'],
      // store
      appStore: useAppStore(),
    };
  },
  onLoad(query) {
    this.query = query;
    this.initData();
  },
  onShow() {
    this.$nextTick(() => {
      for (let i = 0; i < this.data.length; i++) {
        this.$refs[`scrollView${i}`].getData(true);
      }
    });
  },
  methods: {
    onSure(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$refs[`scrollView${this.current}`].searchData(this.queryData);
          this.$refs.filterView.onClose();
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onReset() {
      this.queryData = this.$options.data().queryData;
    },
    onSearch(e) {
      this.$refs[`scrollView${this.current}`].searchData(this.queryData);
    },
    // 初始数据
    initData() {},
    // 配置项删除
    onItemDel(item) {
      uni.showModal({
        title: '提示',
        content: '是否确认删除？',
        success: (res) => {
          if (res.confirm) {
            delRoomConfigDetail(item.roomConfigDetailId).then((res) => {
              uni.showToast({
                title: `删除成功`,
              });
              this.$refs[`scrollView${this.current}`].searchData(
                this.queryData
              );
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
      });
    },
    // 操作
    onAction(data) {
      uni.showActionSheet({
        itemList: ['新增房间配置', '初始化配置'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.type = 'add';
          } else if (res.tapIndex === 1) {
            this.type = 'init';
          }
          this.data = data;
          this.$refs.popup.open('bottom');
        },
        fail: (res) => {
          console.log(res.errMsg);
        },
      });
    },
    // form回调
    onCallback(r) {
      let api;
      if (this.type === 'init') {
        api = netInit;
      } else if (this.type === 'add') {
        api = addRoomConfigDetail;
      }
      console.log(r);
      // loading提示
      uni.showLoading({ title: '提交中' });
      let params = {
        bedId: this.data.bedId,
        ...r,
      };
      api(params).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: `操作成功`,
        });
        // 刷新详情
        this.$refs[`scrollView${this.current}`].searchData(this.queryData);
        this.data = {};
        this.$refs.popup.close();
      });
    },
    // swiper
    onTabchange(e) {
      let index = e.target.current || e.detail.current;
      this.current = index;
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - var(--window-top));
  background: #f2f2f2;
  position: relative;
  display: flex;
  flex-direction: column;
  :deep(.uni-searchbar) {
    padding: 0;
  }
  :deep(.uni-forms) {
    .uni-forms-item__label {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }
    .uni-easyinput__content {
      background: #f5f5f5 !important;
      .uni-easyinput__content-input {
        height: 33px;
      }
    }
    .uni-select {
      background: #f5f5f5;
    }
    .uni-date-x {
      background: #f5f5f5;
    }
    .uni-data-tree {
      background: #f5f5f5;
    }
  }
  .filterBtn {
    display: flex;
    align-items: center;
    .r {
      background: #6bb0ff;
      border-radius: 70rpx 0rpx 0rpx 70rpx;
    }
    .s {
      background: #5293ff;
      border-radius: 0rpx 70rpx 70rpx 0rpx;
    }
    .btn {
      width: 50%;
      font-size: 28rpx;
      color: #ffffff;
      margin: 0;
      &::after {
        border: none;
      }
    }
  }
  .listBox {
    flex: 1 1 auto;
    position: relative;
    .swiper-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    :deep(.uni-collapse) {
      width: auto;
      margin: 0 36rpx;
    }
    .item {
      line-height: 1;
      background: #ffffff;
      letter-spacing: 2rpx;
      position: relative;
      &:last-child {
        margin-bottom: 0;
      }
      .m {
        max-height: 40vh;
        margin: 0 30rpx;
        border-radius: 8rpx;
        overflow: auto;
        padding: 26rpx 17rpx;
        // background: antiquewhite;
        border-bottom: 6rpx double #fff;
        position: relative;
        .bItem {
          margin-bottom: 20rpx;
          display: flex;
          align-items: baseline;
          &:last-child {
            margin-bottom: 0;
          }
          .name {
            width: 35%;
            font-size: 28rpx;
            color: #989898;
            line-height: 33rpx;
          }
          .value {
            flex: 1;
            font-size: 28rpx;
            color: #505050;
            line-height: 33rpx;
          }
        }
        .del {
          position: absolute;
          top: 10rpx;
          right: 10rpx;
        }
      }
      .f {
        padding: 24rpx 40rpx;
        text-align: right;
        box-shadow: 0 0 30rpx 10rpx #ebebeb;
      }
    }
  }
}
</style>
